<template>
	<view class="content">
		<view class="row list" v-for="(item,index) in list" :key="index">
			<view class="col-24 img_bg">
				<image class="img" src="../../static/coupon/yhjbg1.png" mode="widthFix"></image>
			</view>
			<view class="col-21 pdl-2 pdr-1 yhqnr" :style="'height:' + height + 'px;'">
				<view class="row">
					<view class="col-17">
						<view class="name t_size_bold t_size_34">
							{{item.typeText }}
						</view>
						<view class="time t_size_26">
							有效期至{{item.expireDateEnd}}
						</view>
					</view>
					<view class="col-7 t_center" @click="$public.navTo('coupon/coupon_detail?id='+ item.id)">
						<view class="name">
							<text>￥</text>{{item.amount}}
						</view>
						<view class="time">
							查看详情<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="row list">
			<view class="col-24 img_bg">
				<image class="img" src="../../static/coupon/yhjbg2.png" mode="widthFix"></image>
			</view>
			<view class="col-21 pdl-2 pdr-1 yhqnr" :style="'height:' + height + 'px;'">
				<view class="row">
					<view class="col-17">
						<view class="name t_size_bold t_size_34">
							新人注册大礼包
						</view>
						<view class="time t_size_26">
							有效期至2021-10-01
						</view>
					</view>
					<view class="col-7 t_center" @click="$public.navTo('coupon/coupon_detail')">
						<view class="name">
							<text>￥</text>388
						</view>
						<view class="time">
							查看详情<text class="iconfont icon-youjiantou"></text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="clear t_center t_size_28" v-if="list.length==0">
			<image src="../../static/public/zwnr.png" mode="heightFix"></image>
			<view>
				暂无优惠券
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 106,
				objPage: {
					amount: 0,
					pageNum: 1,
					pageSize: 10,
					typeService: 0
				},
				loading: true,
				list: []
			}
		},
		onLoad() {
			this.load();
		},
		methods: {
			async load(){
				if(!this.loading){
					return
				}
				let res = await this.$api.request(this.$api.intercity.getlist,this.objPage);
				if(res){
					if(res.list.length != this.objPage.pageSize){
						this.loading = false;
					}
					this.list = this.list.concat(res.list);
					if(res.list.length != 0){
						this.loadHeight()
					}
				}
			},
			loadHeight() {
				let that = this;
				uni.createSelectorQuery().in(this)
					.select('.img_bg')
					.boundingClientRect()
					.exec(ret => {
						that.height = ret[0].height;
					});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.list {
		width: 92%;
		padding: 0 4%;
		padding-top: 30rpx;
		position: relative;

		.img_bg {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.yhqnr {
			position: absolute;
			top: 30rpx;
			left: 0;

			.row {
				display: table;
				height: 100%;

				.col-17,
				.col-7 {
					height: 100%;
					display: table-cell;
					vertical-align: middle;
				}

				.col-17 {
					.name {
						height: 45rpx;
						line-height: 25rpx;
						color: #333333;
					}

					.time {
						height: 35rpx;
						line-height: 45rpx;
						color: #999999;
					}
				}

				.col-7 {
					color: #FFFFFF;

					.name {
						height: 45rpx;
						line-height: 25rpx;
						font-size: 48rpx;

						text {
							font-size: 26rpx;
						}
					}

					.time {
						height: 35rpx;
						line-height: 45rpx;
						font-size: 28rpx;
						text-indent: 0.5em;
					}
				}
			}
		}
	}
	
</style>
